<template>
  <view class="text-center p-[40rpx] box-border">
    <view class="mb-[30rpx] flex flex-center">
      <image src="@/assets/img/xyi.svg" mode="widthFix" class="w-[120rpx] h-[120rpx]" />
    </view>
    <text class="text-[48rpx] mb-[30rpx] block text-[#4caf50] font-bold">签署电子协议</text>
    <!-- <text class="text-[32rpx] text-[#666] leading-[1.6] mb-[60rpx] block">
      根据国家卫生健康委员会要求，申请{{ isHuaSheng ? '电子健康码' : '诊疗卡' }}需要签署《{{ isHuaSheng ? '电子健康码' : '诊疗卡' }}使用协议》，请仔细阅读协议内容后签署。
    </text> -->

    <view class="bg-[#f8f9fa] rounded-[24rpx] p-[50rpx] text-center mb-[40rpx] border border-[#e9ecef]">
      <text class="text-[40rpx] mb-[30rpx] block font-bold">{{ contractStatus || '待签署' }}</text>
      <text class="text-[#6c757d] mb-[40rpx] block">我们已将电子协议发送到您的手机，请及时签署</text>
    </view>

    <view class="bg-[#f8f9fa] rounded-[24rpx] p-[40rpx] text-left mb-[40rpx] border border-[#e9ecef]">
      <view class="text-[24rpx] truncate mb-2" @tap="copy(cid)">合同编号：{{ cid }}</view>
      <view class="text-[24rpx] truncate">合同名称：{{ contractName }}</view>
    </view>

    <view class="text-[24rpx] text-[#ff0000] mb-[40rpx] block">⬇️ 提示：签署协议成功后，点击下面的“确认已签署”按钮 ⬇️</view>
    <view class="flex flex-center gap-[20rpx]">
     
      <nut-button type="primary" size="large"
        class="h-[88rpx] flex-1 text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]" @click="onSign">
        <template #icon>
          <IconFont name="edit" class="mr-[10rpx]" />
        </template>
        <text>确认已签署</text>
      </nut-button>
    </view>
    <view class="text-[24rpx] text-[#6c757d] mb-[40rpx] block my-8" @click="onResign">签署有问题？可以点击这里
      <text class="text-[#4caf50] underline">重新申请</text>
    </view>
    <!-- <nut-button size="large"
      class="h-[88rpx] flex-1 text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]" @click="onResign">
      <template #icon>
        <IconFont name="edit" class="mr-[10rpx]" />
      </template>
      <text>重新申请</text>
    </nut-button> -->
   
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import { reactive, ref } from 'vue';
import Taro from '@tarojs/taro'


const props = defineProps<{
  status: string,
  contractName: string,
  contractStatus: string,
  isHuaSheng: boolean
}>()
const cid = ref(Taro.getStorageSync(props.contractName) || "")
const approveStatusMap:any = reactive({
  'PENDING': '待签署',
  'ACCEPT': '已签署',
  'REJECT': '拒绝',
  'DEADLINE': '过期没人处理',
  'CANCEL': '流程已撤回',
  'STOP': '流程已终止',
  'WAITPICKUP': '待领取',
  'FILLPENDING': '待填写',
  'FILLACCEPT': '填写完成',
  'FORWARD': '已转他人处理',
  'RELIEVED': '已解除',
  'FILLREJECT': '拒绝填写',
  'EXCEPTION': '异常'
})

const emit = defineEmits(['check'])
function onSign() {
  emit('check')
}
function onResign() {
  emit('resign')
}
function copy(text: string) {
  Taro.setClipboardData({
    data: text,
    success: () => {
      Taro.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}
</script> 